<template>
    <div id="road" @click="change"
      :style="log == 0 ? 'background-color:rgb(245, 245, 245)' : 'background-color: rgba(13, 13, 13, 0.8)'">事故热力图</div>
  </template>
  
  <script setup>
  import axios from 'axios'
  import { LineLayer,HeatmapLayer } from '@antv/l7'
  import { ref, computed, inject, onMounted } from 'vue'
  const log = ref(0);
  let active = ref()
  
  
  const { scene, map } = inject("$scene_map");
  
  
  var heat_layer2=new HeatmapLayer()
  const change = async() => {
   
    if (log.value == 0) {
      log.value = 1
      var res = await axios("http://localhost:8080/events")
      heat_layer2 =new HeatmapLayer ({
      name: "热力图",
      zIndex: 3,
    }).source(res.data)
      // 设置道路宽度
      .size(5)
      .shape('heatmap')
       // weight映射通道
        .style({
          intensity: 2,
          radius: 20,
          rampColors: {
            colors: [
              '#FF4818',
              '#F7B74A',
              '#FFF598',
              '#91EABC',
              '#2EA9A1',
              '#206C7C'
            ].reverse(),
            positions: [ 0, 0.4, 0.8, 1.2, 1.6, 2.0 ]
        }})
      scene.addLayer(heat_layer2)
      //scene.setMapStyle('normal')
    } else {
      log.value = 0
      
      scene.removeLayer(heat_layer2)
      //const { scene, map } = inject("$scene_map");
      //scene.removeLayer(road_layer2)
    }
  
  
  }
  
  
  </script>
  <style scoped>
  #road {
    height: 100%;
    width: 150px;
    font-size: 25px;
    color: grey;
    line-height: 80px;
    border-left: 1px solid;
    border-color: gray;
    padding-left: 7px;
    padding-right: 7px;
    align-items: center;
    display: flex;
    justify-content: center;
    margin-left: 30px;
  }
  </style>